@import '../Shared/_variables.scss';

.footer {
  background-color: $deep-space-blue;
  color: white;
  list-style-type: none;
  padding: 80px 40px;

  .footer-column {
    margin: 0px 0px 8px;
    padding: 0px 15px;
    
    a.span {
      color: $footer-color !important;
      &:hover {
        color: $bright-orange !important;
      }
    }
   
    .footer-column__title {
      font-size: 16px;
      text-transform: uppercase;
      padding: 0px 0px 16px;
      font-family: 'Open Sans', 'Segoe UI', Tahoma, sans-serif;
      font-weight: 700;
    }

    .footer-column__list {
      margin: 0 auto 15px;
      list-style: none;
      padding-left: 0;
      margin-left: 0;
      font-size: 14px;

      .footer-column__link {
        color: white;
        font-family: 'Open Sans', 'Segoe UI', Tahoma, sans-serif;
        padding: 8px 8px 8px 0px;

        &:hover {
          color: $bright-orange;
          border-bottom: 1px solid;
        }
      }
    }
  }

  // center in mobile view
  #footer__social, 
  #footer__copyright {
    text-align: center;
  }

  #footer__social {
    ul {
      margin-left: 0px;
    }
    @media (min-width: 992px) {
      text-align: left;
    }
  }

  #footer__copyright {
    li {
      margin-right: 4px;
    }
    @media (min-width: 992px) {
      text-align: right;
    }
  }

  .footer__copyright {
    text-align: right;
  }

  .copyright-notice {
    display: block;
    padding-right: 16px;

    @media (min-width: 992px) {
      display: inline;
    }
  }

  .column__links {
    list-style-type: none;
    margin: 0px 0px 16px;
    padding-left: 0;
    font-size: 14px;

    @media (max-width: 576px) {
      margin: 15px 0;

      &:first-of-type {
        margin-top: 0;
      }
    }

    a {
      color: #ffffff;
      display: block;
      line-height: 1.6;
      padding: 8px 8px 8px 0;
      text-decoration: none;

      &:hover {
        color: $bright-orange;
        border-bottom: 1px solid;
      }
      &.social-icon:hover{
        border-bottom: none;
      }

      /* for social icons */
      svg {
        fill: #fff;
        path {
          fill: #fff;
        } 
        rect {
          fill: #fff;
        } 
        &:hover {
          path {
            fill: #F99D78;
          }
          rect {
            fill: #F99D78;
          } 
        }
      }

      &:hover > .link__hover, 
      &:hover > .link__hover > .highlight-text {
        color: #F99D78;
        padding-bottom: 2px;
        border-bottom: 1px solid;
      }
    }

    &.column__social {
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: center;
      padding: 0;

      @media (min-width: 1200px) {
        width: auto;
        padding-left: 20px;
      }

      li {
        margin: 0 10px;

        &:first-child {
          margin-left: 0;
        }

        &:last-child {
          margin-right: 0;
        }
      }
    }

    li {
      font-size: 14px;
      line-height: 1.6;
      
      &.column-item--add-bottom-spacer {
        margin-bottom: 15px;
      }
    }
  }
}
